<template>
  <el-cascader
    v-model="selected"
    :options="provinceData"
    @change="handleChange"
    placeholder="请选择省/市/区"
  ></el-cascader>
</template>

<script>
import provinceData from '../../utils/city.json' // 引入省市区数据

export default {
  data () {
    return {
      selected: [
        '北京市',
        '北京市',
        '东城区',
        'xxx镇xxx街道xx校区'
      ],
      provinceData: this.formatData(provinceData) // 使用引入的省市区数据
    }
  },
  methods: {
    handleChange (value, label) {
      console.log(value, label)
    },
    formatData (data) {
      return data.map(province => {
        return {
          value: province.name,
          label: province.name,
          children: province.cityList.map(city => {
            return {
              value: city.name,
              label: city.name,
              children: city.areaList.map(area => {
                return {
                  value: area.name,
                  label: area.name
                }
              })
            }
          })
        }
      })
    }
  }
}
</script>
